<template>
	<div class="app-container">


		<!-- 查询参数 -->

		<div class="search-wrapper">
			<el-form class="search-param" ref="pageParam" :model="pageParam" label-width="100px" size="mini">
				<el-form-item label="电池包号">
					{{pageParam.batNo}}
					<el-button type="primary" size="mini" @click="openbat">选择电池包</el-button>
				</el-form-item>
				<el-form-item label="" prop="dateRange">
					<el-date-picker v-model="dateRange" size="small" style="width: 100%"
						value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-"
						start-placeholder="请选择开始时间" end-placeholder="请选择结束时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item style="margin-left: -60px;">
					
					<el-button type="primary" size="mini" class="el-icon-search" @click="pageByParam">确认查询</el-button>
				<el-button type="primary" size="mini" class="el-icon-exp" @click="exp">导出数据</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-row>
			<el-col :span="24">
				<div class="chart-wrapper">
					<LineChart ref="wa" :colorindex="2"  :height="cheight/2-120+'px'"/>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<vxe-table show-overflow :column-config="{resizable: true}" :import-config="{}" :export-config="{}"
					:print-config="{}" :loading="loading" :data="tableData.list" :height="cheight/2-180" size="mini"
					border stripe>
					<vxe-column type="seq" title="序号" width="60"></vxe-column>
					<vxe-column field="batNo" title="电池包号"></vxe-column>
					<vxe-column field="beginSoc" title="开始电量"></vxe-column>
					<vxe-column field="endSoc" title="结束电量"></vxe-column>
					<vxe-column field="offsetSoc" title="充入电量"></vxe-column>
					<vxe-column field="beginTime" title="开始时间"></vxe-column>
					<vxe-column field="endTime" title="结束时间"></vxe-column>
					<vxe-column field="chargeTime" title="充电时长"></vxe-column>
					<vxe-column field="remark" title="备注"></vxe-column>
				</vxe-table>
				<vxe-pager background size="small" stripe :loading="loading" :current-page="pageParam.pageIndex"
					:page-size="pageParam.pageSize" :total="tableData.totalRow"
					:page-sizes="[15, 20, 100, {label: '大量数据', value: 1000}]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" background
					class="page-wrapper" @page-change="handleCurrentChange">
				</vxe-pager>
			</el-col>
		</el-row>
		<batlist ref="batlist" @selebatno="selebatno" />
	</div>
</template>

<script>
	import LineChart from './dashboard/LineCharts'
	import batlist from '../capacity/bat_list.vue'
	import {
		getBatEventExport,
		getBatEvent
	} from './index.js'
	export default {
		components: {
			LineChart,
			batlist
		},
		data() {
			var year = new Date().getFullYear();
			var month = new Date().getMonth() + 1;
			var day = new Date().getDate();
			month = month<10?'0'+month:month;
			day = day<10?'0'+day:day;
			var nday = year+"-"+month+"-"+day;
			return {
				loading: true,
				// 日期范围
				dateRange: [nday+' 00:00:00', nday + ' 23:59:59'],
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now() - 8.64e6
					}
				},
				tableData: {
					totalRow: 0,
					list: []
				},
				cheight: document.documentElement.clientHeight,
				pageParam: {
					"batNo":"Z0000110",
					"beginTime": "",
					"endTime": "",
					"pageIndex": 1,
					"pageSize": 10,
					"typeList": [1]
				}
			}
		},
		created() {
			this.oldlist()
			
		},
		methods: {
			openbat() {
				this.$refs.batlist.open();
			},
			//选择
			selebatno(e) {
				console.log(e);
				this.pageParam.batNo = e.batNo;
				setTimeout(() => {
					this.oldlist();
				}, 500)
			},
			//导出数据
			async exp(){
				this.pageParam.beginTime = this.dateRange[0];
				this.pageParam.endTime = this.dateRange[1];
				const res = await getBatEventExport(this.pageParam);
				if(res.code==1){
					console.log(res);
					let hrefs=this.$store.state.settings.ip+res.obj;
					console.log(hrefs);
					window.location.href = hrefs;
				}
			},
			//确认查询
			pageByParam() {
				this.pageParam.pageIndex = 1;
				this.pageParam.pageSize = 15;
				this.oldlist()
			},
			handleCurrentChange(val) {
				console.log(val);
				if (val.type == "size") {
					this.pageParam.pageIndex = 1;
					this.pageParam.pageSize = val.pageSize;
					this.oldlist();
				}
				if (val.type == "current") {
					this.pageParam.pageIndex = val.currentPage;
					this.pageParam.pageSize = val.pageSize;
					this.oldlist();
				}
			},
			//电池列表
			async oldlist() {
				this.loading = true;
				this.pageParam.beginTime = this.dateRange[0];
				this.pageParam.endTime = this.dateRange[1];
				let result = await getBatEvent(this.pageParam);
				//console.log("返回结果", result.data);
				this.loading = false;
				this.tableData.totalRow = result.obj.length;
				this.tableData.list = result.obj;
				let a = [];
				let b = [];
				let x = [];
				result.obj.forEach(item=>{
					a.push(item.offsetSoc);
					b.push(item.chargeTime);
					x.push(item.endTime);
				})
				this.$refs.wa.setnums(a,b,x,true);
			}
			
		}
	}
</script>

<style>
	.vxe-input--panel.type--date,
	.vxe-input--panel.type--month,
	.vxe-input--panel.type--week,
	.vxe-input--panel.type--year {
		z-index: 9998 !important
	}

	.vxe-select--panel {
		z-index: 9997 !important
	}
</style>
